<template>
    <div class="content_wrapp">
        <!-- 图标菜单导航 -->
        <div class="img_list">
            <div class="img_item" v-for="item in kingKongModule.kingKongList" :key="item.id">
                <img :src="item.picUrl">
                <div class="img_txet">{{ item.text }}</div>
            </div>
        </div>
        <!-- 新人推荐 -->
        <div class="recommend">
            <span>—&nbsp; 新人专享礼&nbsp; —</span>
        </div>
        <div class="recommend_new">
            <div :class="index > 1 ? 'recommend_fee2' : 'recommend_fee1'" v-for="(item, index) in indexActivityModule"
                :key="item.id">
                <div class="text">{{ item.title }}</div>
                <img :src="item.picUrl">
            </div>
            <!-- 差一个 -->
        </div>
        <!--  -->
        <!-- 类目热销榜单     picUrl  /categoryName -->
        <div class="hot_sale_text">
            <span> 类目热销榜 </span>
        </div>
        <div class="hot_sale">

            <div :class="index > 0 ? 'img_item_small' : 'img_item'"
                v-for="(item, index) in categoryHotSellModule.categoryList" :key="item.id">
                <div class="text">{{ item.categoryName }}</div>
                <img :src="item.picUrl">
            </div>
            <!-- 
              <div class="img_item_small">
                <div class="text">福利社</div>
                <img src="@/assets/recommend_fee/2.jpg">
            </div> -->
        </div>
        <!-- theone -->
        <theone></theone>
    </div>
</template>

<script setup lang="ts">
import homeApi from '@/api/home'
import { ref, onMounted, computed } from 'vue'
import theone from '../theone/index.vue'
//初始化top列表数据
const homeData = ref<any>([])
//获取列表数据
const getListTest = async () => {
    try {
        let result = await homeApi.getHomeCateList()
        homeData.value = result.data
        // console.log('测试能拿数据不', result)
    } catch (error) {
        console.log(error)
    }
}
//初始化挂在页面
onMounted(() => {
    getListTest()
    //
})

//类目排行榜
const categoryHotSellModule = computed(() => {
    return homeData.value.categoryHotSellModule || {}
})
//图标列表
const kingKongModule = computed(() => {
    return homeData.value.kingKongModule || {}
})
//新人专项
const indexActivityModule = computed(() => {
    return homeData.value.indexActivityModule
})
//点击图片跳转到连接


</script>

<style scoped lang="scss">
//图片列表导航各区域
.img_list {
    width: 375px;
    height: 174.5px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    // 图标导航每个尺寸
    .img_item {
        margin: 0 10px;
        text-align: center;
    }

    img {
        width: 55px;
        height: 55px;
    }

    //图标列表文字
    .img_txet {
        widows: 100%;
        height: 18px;
        color: rgb(51, 51, 51);
        font-size: 12px;
    }
}

.recommend {
    text-align: center;
    font-size: 16px;
}

//新人专项礼图片区域
.recommend_new {
    width: 375px;
    height: 219px;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 0 0 15px;


    .recommend_fee1 {
        width: 171.5px;
        height: 217px;
        box-sizing: border-box;
        padding: 15px 0 0 15px;
        background: #f9e9cf;
        align-items: flex-start;

        img {
            width: 129px;
            height: 128.5px;
            text-align: center;
            margin-top: 10px;
        }

        .text {
            font-size: 16px;
        }
    }

    .recommend_fee2 {
        width: 171.5px;
        height: 107.5px;
        margin: 0 2px 2px 0;
        padding: 10px 0 0 15px;
        box-sizing: border-box;
        background: #fbe2d3;
        display: flex;
        align-content: space-between;
        font-size: 16px;

        img {
            width: 100px;
            height: 100px;
        }
    }


}

//热卖推荐文字
.hot_sale_text {
    width: 375px;
    height: 50px;
    padding: 0 15px;
    font-size: 16px;
    box-sizing: border-box;

    span {

        line-height: 50px;
    }
}

//热销榜单
.hot_sale {
    display: flex;
    flex-wrap: wrap;
    width: 375px;
    height: 305px;
    padding: 0 10px 10px 15px;
    font-size: 16px;
    box-sizing: border-box;

    .img_item {
        width: 170px;
        height: 100px;
        display: flex;
        justify-content: space-around;
        background: #f9f3e4;
        margin: 0 5px 5px 0;

        img {
            width: 100px;
            height: 100px;
        }

    }

    .img_item_small {
        width: 82.5px;
        height: 90px;
        background: #f5f5f5;
        margin: 0 5px 5px 0;
        box-sizing: border-box;

        img {
            width: 60px;
            height: 60px;
        }
    }
}
</style>